<template>
  <div>
    <div style="text-align: left;margin-bottom: 20px">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="username" size="mini" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">查询</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: left;margin-bottom: 20px">
      <el-button type="danger" icon="el-icon-delete" size="mini" plain>批量删除</el-button>
      <el-button type="warning" size="mini" icon="el-icon-download" plain>导入</el-button>
      <el-button type="warning" size="mini" icon="el-icon-upload2" plain>导出</el-button>
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd" plain>添加</el-button>
    </div>
    <!--
      el-table: elmentUi提供的表格组件
        :data="tableData" - 指定表格数据
        border - 边框
        style="width: 100%" - 宽度占父元素100%
      el-table-column：elmentUi提供的表格列组件
        prop="id"：改列显示哪一个属性值
        label="编号"：标签
        width="180"：该列占用的宽度
        show-overflow-tooltip： 当内容长度大于指定的长度就隐藏起来
      el-button：按钮
        icon="el-icon-delete-solid" - 图标
        size="mini" - 大小尺寸
        type="text" - 文本按钮
        @click - 单击事件
    -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        align="center"
        header-align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        align="center"
        header-align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        header-align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="address"
        width="200"
        align="center"
        header-align="center"
        show-overflow-tooltip
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="text"
                     size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button icon="el-icon-delete-solid"
                     size="mini"
                     type="text"
                     @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--
      el-pagination - 分页栏
        @size-change="handleSizeChange" - 每页条数改变时触发
        @current-change="handleCurrentChange" - 当前页改变时触发
        :current-page="1" - 当前页
        :page-sizes="[5, 10, 15, 20]" - 选择每页显示的条数
        :page-size="5" - 每页显示的条数
        background - 当前页背景颜色
        align="right" - 分页栏靠右
        layout="total, sizes, prev, pager, next, jumper" - 分页栏的布局
        :total="34" - 总数量
    -->
    <el-pagination style="margin-top: 20px"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="pageSize"
                   background
                   align="left"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="totals">
    </el-pagination>
    <!--  对话框  -->
    <el-dialog title="添加和修改的对话框"
        :visible.sync="dialogVisible"
        width="50%">
        <el-form label-width="80px" :model="formData">
          <el-form-item label="日期">
            <el-input v-model="formData.date"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="formData.address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios"; //引入axios
export default {
  data() {
    return {
      //1.高级查询和分页的相关数据
      currentPage: 1,
      pageSize: 5,
      totals: 0,
      tableData: [],
      username: 'tom',

      //2.删除的相关数据

      //3.批量删除的相关数据

      //4.添加和修改的相关数据
      formData:{
        date:'',
        name:'',
        address:''
      }, //表单数据
      dialogVisible: false,  //控制对话框
    }
  },
  methods: {
    //1.获取分页列表数据
    getData(){
      axios.post("/emp/list",{"currentPage":this.currentPage,"pageSize":this.pageSize}).then(res=>{
        //res.data // axios获取响应数据的固定格式
        this.totals = res.data.totals;
        this.tableData = res.data.data;
      })
    },
    //2.点击当前页的时候触发
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    //3.每页显示的条数改变的时候触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getData();
    },
    //1.点击添加弹出对话框
    handleAdd(){
      this.formData = { //重置表单数据
        date:'',
        name:'',
        address:''
      }
      this.dialogVisible = true;
    },
    //2.点击编辑弹出对话框
    handleEdit(index, row) {
      this.formData = row; //回显表单数据
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success',
        duration: 10000
      });
      //this.$message.success('恭喜你，这是一条成功消息');
      //this.$message.error('错了哦，这是一条错误消息');
    },


    handleSearch() {
    }
  },
  mounted() {
    //页面一加载就会去执行
    this.getData();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
